<template>
  <n-el tag="div" class="box-main" :style="{
    width: getWidth(props.width),
    height: getHeight(props.height),
    margin: props.margin
  }">
    <n-el tag="div" class="box-top-one">
    </n-el>
    <n-el tag="div" class="box-top-two">
    </n-el>
    <n-el tag="div" class="box-bottom">
    </n-el>
    <n-el tag="div" class="box-left">
    </n-el>
    <n-el tag="div" class="box-right-one">
    </n-el>
    <n-el tag="div" class="box-right-two">
    </n-el>
    <n-el tag="div" class="box-left-top">
    </n-el>
    <n-el tag="div" class="box-right-top">
    </n-el>
    <n-el tag="div" class="box-left-bottom">
    </n-el>
    <n-el tag="div" class="box-right-bottom">
    </n-el>
    <n-el tag="div" class="box-content">
      <n-el tag="div">
        <slot>
        </slot>
      </n-el>
    </n-el>
  </n-el>
</template>

<script setup name="HzBox2">

// eslint-disable-next-line no-undef
const props = defineProps({
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  margin: {
    type: String,
    default: '5px 5px 5px 5px' // 上右下左
  },
});

function getWidth(width) {
  return `calc(${width} - 2px - ${props.margin.split(' ')[1]} - ${props.margin.split(' ')[3]})`
}

function getHeight(height) {
  return `calc(${height} - 2px - ${props.margin.split(' ')[0]} - ${props.margin.split(' ')[2]})`
}

</script>

<style scoped lang="less">

.box-main{
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-left{
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
}

.box-right-one{
  position: absolute;
  bottom: 0;
  right: 0;
  top: 45px;
  width: 9px;
  height: 23px;
  background-image: url("/@assets/hz-box/2/right_one.png");
}

.box-right-two{
  position: absolute;
  top: 68px;
  bottom: 36px;
  right: 0;
  width: 9px;
  background: #87b5ed;
}

.box-top-one{
  position: absolute;
  top: 0;
  left: 37px;
  width: 51px;
  height: 11px;
  background-image: url("/@assets/hz-box/2/top_one.png");
}

.box-top-two{
  position: absolute;
  top: 0;
  left: 88px;
  width: calc(100% - 200px);
  height: 11px;
  background: linear-gradient(to right,#87b5ed, rgba(135, 181, 237, 0.0));
}

.box-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #343e51;
}

.box-left-top{
  position: absolute;
  top: 0;
  left: 0;
  width: 37px;
  height: 37px;
  background-image: url("/@assets/hz-box/2/left_top.png");
}

.box-right-top{
  position: absolute;
  top: 0;
  right: 0;
  width: 63px;
  height: 38px;
  background-image: url("/@assets/hz-box/2/right_top.png");
}

.box-left-bottom{
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 14px;
  height: 7px;
  background-image: url("/@assets/hz-box/2/left_bottom.png");
}

.box-right-bottom{
  position: absolute;
  bottom: 4px;
  right: 0;
  width: 36px;
  height: 36px;
  background-image: url("/@assets/hz-box/2/right_bottom.png");
}

.box-content{
  position: absolute;
  top: 20px;
  left: 30px;
  width: calc(100% - 49px);
  height: calc(100% - 40px);
}

</style>